@import "common";
@import "font.css";
$color:#17b5ac;
.mask{
  background:#000;
  opacity:.3;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:100%;
  width:100%;

}
#people_view{
  font-family: 'Brown-Light';
  position:fixed;
  top:50%;
  left:50%;
  width:940px;
  height:600px;
  background:rgba(41,44,49,.95);
  margin-left:-940/2+px;
  margin-top:-600/2+px;
}

.people_detail{
  padding:50px 0 0 114px;

}
.detail_left{
  width:240px;
  float:left;
  .header{
    padding-left:55px;
    position:relative;
  }
  .header_img{
    @include wh(70,70);
    -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
    border:6px solid $color;
    display:block;

  }
  .like{
    font-size:20px;
    color:$color;
    margin-top:10px;
    .like_people{
      position:absolute;
      z-index:9;
      left:20px;
      .like_people_list{
        display:none;
        left:-60px;
        top:35px;
        position:absolute;
        -webkit-box-shadow:0px 0px 15px #000; -moz-box-shadow:0px 0px 15px #000; box-shadow:0px 0px 15px #000;
        @include wh(270,379);
        background:#292c31;
        .cor_l_t{
          position:absolute;
          left:10px;
          top:5px;
          @include wh(14,14);
          border-top:3px solid $color;
          border-left:3px solid $color;
        }
        .cor_r_t{
          position:absolute;
          right:10px;
          top:5px;
          @include wh(14,14);
          border-top:3px solid $color;
          border-right:3px solid $color;
        }
        .cor_l_b{
          position:absolute;
          left:10px;
          bottom:5px;
          @include wh(14,14);
          border-left:3px solid $color;
          border-bottom:3px solid $color;
        }
        .cor_r_b{
          position:absolute;
          right:10px;
          bottom:5px;
          @include wh(14,14);
          border-right:3px solid $color;
          border-bottom:3px solid $color;
        }
        .scroll_list{
          overflow:hidden;
          @include wh(240,314);
          margin:33px auto 0;
          padding-left:10px;
          ul{
            margin-left:-7px;
          }
        li{
          float:left;
          margin:0 0 7px 7px;
          img{ display:block;}
        }
        }
      }
    }
    .like_icon{
      margin-left:2px;
      cursor:pointer;

    }
    .like_count{
      display:inline-block;
      width:50px;
      text-align:right;
    }
    .like_btn{
      left:53px;
      top:-1px;

    }
  }
  .contact{
    font-size:14px;
    color:#FFF;
    a{
      color:#fff;
    }
    ul{ margin-top:10px;}
    li{
      margin-bottom:8px;
     i{ margin-right:15px;}
    }

  }
  .others{
    width:211px;
    margin-top:20px;
    text-align:center;
    font-size:0;
    span{
      display:inline-block;
      margin:0 6px;
    }
    .value_icon{
      @extend .icon;
      @include wh(34,34);
      @include bp(-74,0);
    }
  }
}
.detail_right{
  width:510px;
  float:left;
  font-size:14px;
  margin-left:27px;
  color:$color;
  .name h2{
    font-size:18px; font-weight:bold;vertical-align:middle;
    display:inline-block;
    margin-right:10px;
    .ch_name{
      font-family:'NotoSansCJKsc';
    }
  }
  .star{
    display:inline-block; vertical-align:middle; top:-1px; position:relative;
    .star_icon{
      margin-right:2px;
    }
  }
  .num,.team{ margin-bottom:-2px; display:block;}
  .tags{
    font-size:0;
    margin-top:12px;
    .tag_icon{
      margin-right:8px;
    }
    a{
      color:$color;
      margin-right:7px;
      border:1px dashed $color;
      -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
      display:inline-block; font-size:14px; vertical-align:middle;
      padding:0 12px;
      line-height:24px;
      height:24px;

    }
  }
  .sub{
    padding-top:30px;
    position:relative;
    color:#fff;
    .edit_btn{
      position:absolute;
      top:10px;

    }
    .short_line{ margin-left:-30px;margin-bottom:5px;}
    .long_line{ margin-left:-30px;margin-bottom:5px;}
    .item{
      @extend %cfx;
      margin-bottom:3px;
      label{
        width:145px;
        float:left;
        overflow:hidden;
        height:22px;
      }
      .value{
        position:relative;
        @at-root .editable{
          position:relative;
        }
        @at-root .edit_ipt{
          position:absolute;
          border:1px solid #bfbfc0;
          height:20px;
          line-height:20px;
          padding-left:5px;
          background:#d7d7d9;
          color:#000;
          font-size:14px;
          -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;
          width:266px;
          left:0;
          top:3px;
          font-family: "Brown-Light";
        }
        @at-root .location_ipt{
          width:180px;
        }
      }
      a{
        color:#fff;
        &:hover{
          color:#515bdf;
        }
      }
    }
  }
}















/*ICON*/
.icon{
  @include bg("sprite.png");
  display:inline-block;
  vertical-align:middle;
  position:relative;
}
.close_btn{
  @extend .icon;
  @include wh(33,33);
  @include bp(-65,-96);
  position:absolute;
  right:8px; top:8px;
  &:hover{
    @include bp(-100,-96);
  }
}
.like_icon{
  @extend .icon;
  @include bp(0,-82);
  @include wh(21,16);
  top:-1px;
  &:hover{
    @include bp(-25,-82);
  }


}
.like_icon.active{
  @include bp(-25,-82);
}
.like_btn{
  @extend .icon;
  @include bp(0,-109);
  @include wh(26,16);
  &:hover{
    @include bp(-32,-109);
  }
}
.like_btn.active{
  @include bp(-32,-109);
}
.tel_icon{
  @extend .icon;
  @include bp(0,-133);
  @include wh(25,25);
}
.email_icon{
  @extend .icon;
  @include bp(-65,-135);
  @include wh(23,17);
}
.location_icon{
  @extend .icon;
  @include bp(-30,-133);
  @include wh(25,25);
}
.constellation{
  @extend .icon;
  @include wh(31,32 );
}

//TODO
@for $i from 1 through 12 {
  .cons_#{$i} {@include bp(-122+36-36*$i,0); }
}

.star_icon{
  @extend .icon;
  @include bp(0,0);
  @include wh(22,22);
}
.tag_icon{
  @extend .icon;
  @include bp(0,-26);
  @include wh(19,19);
}
.short_line{
  @extend .icon;
  @include bp(0,-193);
  @include wh(318,2 );
}

.long_line{
  @extend .icon;
  @include bp(0,-213);
  @include wh(500,2 );
}
.edit_icon{
  @extend .icon;
  @include bp(0,-52);
  @include wh(24,22);
  &:hover{
    @include bp(-33,-52);
  }
}

.edit_icon.edit{
  @include bp(-63,-52);
  &:hover{
    @include bp(-87,-52);
  }
}































